<template>
  <div>
    <div class="filter-container">
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleUpload"
      >
        添加
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleUpdate"
      >
        修改
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px"
        type="warning"
        icon="el-icon-delete"
        @click="handleDelete"
      >
        删除
      </el-button>
    </div>
    <div :style="{ height: dynamicHeight }">
      <split-pane
        :min-percent="splitMinPrecent"
        :default-percent="defaultPercent"
        split="vertical"
        style="border: 1px solid #e8e8e8"
      >
        <template slot="paneL">
          <span v-if="!openSide">
            <section-title
              title=""
              open-class="el-icon-caret-right"
              @changePaneL="changePaneLWith"
            />
          </span>
          <span v-else>
            <section-title
              title="工作流列表"
              open-class="el-icon-caret-left"
              @changePaneL="changePaneLWith"
            />
            <structure-tree
              :data-source="dataSource"
              node-key="oid"
              :default-props="defaultProps"
              @change="clickNode"
            ></structure-tree>
          </span>
        </template>
        <template slot="paneR">
          <split-pane
            :min-percent="10"
            :default-percent="50"
            split="horizontal"
          >
            <template slot="paneL" style="border: 1px solid #e8e8e8">
              <div id="rapR"></div>
            </template>
            <template slot="paneR">
              <el-container style="max-height: 100%">
                <el-main style="padding: 0px">
                  <div ref="tabcard">
                    <el-tabs type="border-card">
                      <el-tab-pane label="工作流信息">
                        <wf-base-info
                          :work-flow-info="workFlowBaseInfo"
                        ></wf-base-info>
                      </el-tab-pane>
                      <el-tab-pane label="文件">
                        <!--                              <file-list :work-flow-oid="tabChangeOid"></file-list>-->
                      </el-tab-pane>
                      <el-tab-pane label="活动">
                        <!--                              <activity-list :work-flow-oid="tabChangeOid"></activity-list>-->
                      </el-tab-pane>
                      <el-tab-pane label="计算项目">
                        <calculation-item-list
                          :data-source="wfProject"
                        ></calculation-item-list>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-main>
              </el-container>
            </template>
          </split-pane>
        </template>
      </split-pane>
    </div>
    <upload-file-modal
      :dialog-visible="dialogVisible"
      :stage-type="stageType"
      @closeDialog="closeDialog"
    ></upload-file-modal>
  </div>
</template>

<script>
  import splitPane from 'vue-splitpane'
  import sectionTitle from '@/components/SectionTitle'
  import wfBaseInfo from '../components/WfBaseInfo'
  import uploadFileModal from '../components/UploadFileModal'
  import structureTree from '@/components/StructureTree'
  import { getAction } from '@/api/action'
  import { BaseListMixin } from '@/mixins/BaseListMixin'
  import { initRaphael } from '@/utils/PreWebRaphaelTools'
  import CalculationItemList from '../components/CalculationItemList'

  export default {
    name: 'LoadPanel',
    components: {
      CalculationItemList,
      splitPane,
      sectionTitle,
      wfBaseInfo,
      structureTree,
      uploadFileModal,
    },
    mixins: [BaseListMixin],
    props: {
      stageType: {
        type: Number,
        default: 1,
      },
    },
    data() {
      return {
        splitMinPrecent: 12,
        defaultPercent: 25,
        dataSource: [],
        openSide: true,
        filterText: '',
        currentCheckNodeData: {},
        childActiveName: 'childFirst',
        defaultProps: {
          children: 'children',
          label: 'wfName',
        },
        workFlowBaseInfo: {
          preId: '编号',
          name: '名称',
          category: '分类',
          createUser: '所有者',
          dataType: '数据类型',
          organization: '单位',
          organizationName: '单位名称',
          modelNum: '型号、产品或课题',
          speciality: '专业',
          specialityName: '专业名称',
          modelNumPart: '部件或子课题',
          versionNum: '版本号编码',
          freeNum: '自由编码',
          createrPreId: '创建用户',
          createTime6: '6位时间',
        },
        url: {
          list: '/presoftasim/wf/workflow/list',
          detail: '/presoftasim/wf/workflow/detail',
          graph: '/presoftasim/wf/workflow/graphData',
          delete: '/presoftasim/wf/workflow/delete',
          getCalProduct: '/presoftasim/wf/workflow/getCalProduct',
        },
        disableMixinCreated: true,
        dialogVisible: false,
        currentClickWorkFlowId: '',
        params: {
          oid: undefined,
        }, //请求参数
        wfProject: [], //当前工作流计算项目列表
        // tabChangeOid: "",
      }
    },
    computed: {
      dynamicHeight: function () {
        return window.innerHeight > 710
          ? window.innerHeight - 40 - 35 + 'px'
          : '710px'
      },
    },
    watch: {
      workFlowBaseInfo: function (newValue, oldValue) {
        this.getCalproject()
      },
    },
    created() {
      this.loadData().then((resolve) => {
        this.getTarget()
      })
    },
    methods: {
      clickNode(data) {
        this.workFlowBaseInfo = data
        this.currentClickWorkFlowId = data.oid
        // 查询绘制流程图的json数据
        let that = this
        getAction(this.url.graph, { workFlowId: data.oid }).then((res) => {
          that.initFun([res.data])
        })
      },
      handleDeleteConfirm() {
        if (
          this.currentClickWorkFlowId === undefined ||
          this.currentClickWorkFlowId == ''
        ) {
          this.$message({
            type: 'warning',
            message: '请点击选择工作流!',
          })
          return
        }
        let that = this
        this.$confirm('此操作将永久删除工作流, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            that.handleDelete(that.currentClickWorkFlowId)
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      closeDialog(arg) {
        this.dialogVisible = false
        if (arg) {
          this.loadData()
        }
      },
      initFun(jsonDataArr) {
        initRaphael('rap', jsonDataArr)
      },
      // 模块title展示  最好调整到computed中
      changePaneLWith() {
        this.openSide = !this.openSide
        if (this.openSide) {
          this.splitMinPrecent = 12
          this.defaultPercent = 25
        } else {
          this.splitMinPrecent = (150 / window.innerWidth) * 30
          this.defaultPercent = (150 / window.innerWidth) * 30
        }
        console.log(this.openSide)
      },
      loadData() {
        return getAction(this.url.list, {}).then((res) => {
          this.dataSource = res.data
          // console.log(res.data[0].oid);
          if (res.data.length > 0) {
            this.defaultCheckedNode = res.data[0].oid
          } else {
            initRaphael('rap', jsonDataArr)
          }
        })
      },
      // getDetail(oid){
      //   getAction(this.url.detail, {'oid': oid}).then(res => {
      //
      //   });
      // },

      handleUpload() {
        this.dialogVisible = true
      },
      //  获取当前工作流计算项目列表
      getCalproject: function () {
        this.params.oid = this.workFlowBaseInfo.oid
        getAction(this.url.getCalProduct, this.params)
          .then((response) => {
            if (response.code === 200) {
              this.wfProject = response.data
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      //  获取跳转地址参数
      getTarget: function () {
        if (this.$route.query.target != null) {
          for (let i in this.dataSource) {
            if (this.$route.query.target == this.dataSource[i].oid) {
              this.clickNode(this.dataSource[i])
            }
          }
          this.childActiveName = 'childFour'
        }
      },
    },
  }
</script>
